Bitwarden Passwordless. devのPlaygroundでパスキーを手軽に動作確認してみる

ども、大瀧です。 パスキーを手軽に実装するためのREST APIとライブラリを提供するBitwarden Passwordless.devがリリースされました。Publickeyさんの紹介記事はこちら?

本ブログでは、Passwordless.devにあるPlayground機能でパスキーの動作を確認する様子をご紹介します。

動作確認環境

今回はパスキーに対応するWebブラウザとしてGoogle Chrome、デバイスとしてMacbookとAndroidスマートフォンを利用しました。

• Mac: Google Chrome バージョン 114.0.5735.133 (arm64)
• Android: Google Chrome バージョン 114.0.5735.131

Passwordless.devの以下のドキュメントに利用方法があります。アカウント作成周りはこちらの「Getting Started」を参考にしました。

1. アプリケーションの作成

サインアップページにアクセスし、アカウント(Organization)を作成します。

アカウントを作成すると、このWeb画面の認証に紐付けるパスキーの登録を促されます。

[Add Passkey]ボタンの押下でMacbookのChromeにパスキーが保存し、[Continue and create your first app]ボタンでアプリケーション(Passwordless.deｖでのパスキーを扱う設定の単位)作成画面を表示します。

アプリケーション名は一意性が求められるので、 Available と表示されるのを確認しましょう。[Create]でアプリケーションが作成されます。

アプリケーションの管理画面では、Passwordless.deｖのAPIにアクセスするための情報や実際のWebアプリケーションに実装するためのクライアントサイド、サーバーサイドのドキュメントへのリンクが表示されます。

2. Playgroundの操作

今回はすぐに試すことのできるサンプルのWebアプリケーションPlaygroundで動作させてみます。画面左のアプリケーションの設定メニューから[Playgrond]をクリックします。

[Create account]リンクをクリックして、アプリケーションへのユーザーアカウント追加画面を表示します。

情報を入力して、[register]ボタンをクリックします。

ユーザーアカウントに紐付くパスキー作成を確認するChromeブラウザの確認画面が表示されます。[続行]をクリックします。

これでアプリケーションにパスキーと紐付くユーザーアカウントを登録できました。

3. 動作確認

先ほどのPlaygroundの画面にある[Email address/username]のテキストボックスをフォーカスしてみると...

Chromeブラウザのパスワードマネージャーによってパスキーの候補が表示されました！これを選択すると...

だばだばっと様々な項目が表示されますが、パスキーによるユーザー認証が通りユーザー情報が表示される様子がわかります。

ちなみに同じ操作をAndroidで操作すると以下の表示に遷移します。

スマートフォンの方が認証方法のバリエーションが多く、実用的ですね。画面ロックは指紋認証と連動させることができるので、最近のスマホアプリの認証と近い実装ができそうです。

まとめ

Bitwarden Passwordless.devのPlaygroundでパスキーを手軽に動作確認する様子をご紹介しました。ライブラリもJavascript/Typescriptの各種ライブラリに対応するものが用意されているので試してみたいですね。

参考URL